<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>无重复字符的最长子串</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        .box {
            display: flex;
            padding: 5%;
        }

        .left-wrap {
            width: 40%;
        }

        pre {
            text-align: left;
            margin-left: -20%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left-wrap">
            <div class="notranslate">
                <p>给定一个字符串，请你找出其中不含有重复字符的&nbsp;<strong>最长子串&nbsp;</strong>的长度。</p>

                <p><strong>示例&nbsp;1:</strong></p>

                <pre>
                    <strong>输入: </strong>"abcabcbb"
                    <strong>输出: </strong>3 
                    <strong>解释:</strong> 因为无重复字符的最长子串是 <code>"abc"，所以其</code>长度为 3。
                    </pre>

                <p><strong>示例 2:</strong></p>

                <pre>
                    <strong>输入: </strong>"bbbbb"
                    <strong>输出: </strong>1
                    <strong>解释: </strong>因为无重复字符的最长子串是 <code>"b"</code>，所以其长度为 1。
                    </pre>

                <p><strong>示例 3:</strong></p>

                <pre>
                    <strong>输入: </strong>"pwwkew"
                    <strong>输出: </strong>3
                    <strong>解释: </strong>因为无重复字符的最长子串是&nbsp;<code>"wke"</code>，所以其长度为 3。
                    &nbsp;    请注意，你的答案必须是 <strong>子串 </strong>的长度，<code>"pwke"</code>&nbsp;是一个<em>子序列，</em>不是子串。
                    </pre>
            </div>

        </div>
    </div>
</body>
<script>
    /**
        给定一个字符串，请你找出其中不含有重复字符的 最长子串 的长度。
        示例 1:
        输入: "abcabcbb"
            输出: 3 
            解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。
        示例 2:

        输入: "bbbbb"
            输出: 1
            解释: 因为无重复字符的最长子串是 "b"，所以其长度为 1。
            示例 3:

        输入: "pwwkew"
            输出: 3
            解释: 因为无重复字符的最长子串是 "wke"，所以其长度为 3。
             请注意，你的答案必须是 子串 的长度，"pwke" 是一个子序列，不是子串。
    */

    /**
        * @param {string} s
        * @return {number}

        思路
            1. 通过for of 循环字符串
            2. 通过indexOf() 判断循环到的字符是否首次出现
                如果是首次出现 Len +1 
                不是就从后一个继续判断

    */
    var lengthOfLongestSubstring = function (s) {
        let num = 0, Len = 0;
        let str = '';
        for (n of s) {
            console.log(n, str.indexOf(n))
            if (str.indexOf(n) == -1) {
                str += n; // 把循环到的字符添加的m中
                num++; // 长度+1
                Len = Len < num ? num : Len;
            } else {
                str += n;
                str = str.slice(str.indexOf(n) + 1); // 如果出现重复的字符 就从下一个重新开始开始
                num = str.length; // 长度重新开始
            }
            console.log(Len, str, num)
        }
        return Len;
    };

    var a = lengthOfLongestSubstring('pwwkew')
    console.log(a)
</script>

</html>